<template>
  <el-button type="primary" color="rgb(221, 80, 88)" @click="addButtonClick"
    >点击触发弹窗测试</el-button
  >
  <submit-dialog
    v-model:dialogVisibleModel="dialogVisible"
    @submit="handleSaveSubmit"
  >
    <template #columns>
      <!-- 表单 -->
      <el-form
        ref="ruleFormRef"
        style="max-width: 600px"
        :model="formData"
        status-icon
        label-width="auto"
        class=""
      >
        <!-- 代码生成区域 -->
        <el-form-item label="描述" prop="description">
          <el-input v-model="formData.description" autocomplete="off" />
        </el-form-item>
        <el-form-item label="分数" prop="score">
          <el-input v-model="formData.score" />
        </el-form-item>
      </el-form>
    </template>
  </submit-dialog>
</template>

<script setup>
import { ref } from "vue";
import {
  addContribute,
  updateContribute,
} from "@/api/content/contribute/contribute.js";
import { Contribute } from "@/model/contribute.d.js";
// 是否显示此dialog
const dialogVisible = ref(false);

// 表单数据
const formData = ref(new Contribute());
// el-dialog实体
const ruleFormRef = ref();
// 表单提交handle
const handleSaveSubmit = async () => {
  const res = addContribute(formData.value);
  console.log("handleSaveSubmit-res", res);
};
// 添加按钮打开
const addButtonClick = () => {
  dialogVisible.value = true;
};
</script>

<style lang="scss"></style>
